<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <meta name="description" content="Demo page for jquery jeditable plugin">
        <meta name="robots" content="index,follow">

        <title>jQuery-jeditable Demos</title>
        <!-- LOAD BOOTSTRAP FOR THE DEMO PAGE -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- OUR CSS -->
        <link href="css/main.css" rel="stylesheet" type="text/css" />

        <!-- LOAD JQUERY -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <!-- LOAD JQUERY UI -->
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
        <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel='stylesheet' />

        <!-- LOAD JQUERY-JEDITABLE -->
        <script src="../src/jquery.jeditable.js"></script>

        <!-- JEDITABLE PLUGINS -->
        <script src="../src/jquery.jeditable.autogrow.js"></script>
        <script src="../src/jquery.jeditable.charcounter.js"></script>
        <script src="../src/jquery.jeditable.checkbox.js"></script>
        <script src="../src/jquery.jeditable.datepicker.js"></script>
        <script src="../src/jquery.jeditable.masked.js"></script>
        <script src="../src/jquery.jeditable.time.js"></script>
        <!-- EXTERNAL LIBS -->
        <script src="js/jquery.autogrowtextarea.js"></script>
        <script src="js/jquery.charcounter.js"></script>
        <script src="js/jquery.maskedinput.js"></script>

        <!-- FONT AWESOME -->
        <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />
        <!-- PRISM.JS TO DISPLAY THE CODE -->
        <link href="css/prism.css" rel="stylesheet" />
        <script src="js/prism.js"></script>
    </head>

    <body>

    <div class='container'>
        <!-- HEADER -->
        <div class='jumbotron jumbotron-fluid'>
                <h1>jQuery-jeditable</h1>
                <p class='lead'>Edit in place plugin for jQuery</p>
                <p>This is a demo page, have a look at the source to see how each example is implemented!</p>
                <p><i class="fab fa-github"></i> <a href="https://github.com/NicolasCARPi/jquery_jeditable/">GitHub repository</a></p>
                <p><i class="fas fa-book"></i> <a href="https://github.com/NicolasCARPi/jquery_jeditable/#installation">Documentation</a></p>
                <p><i class="fas fa-code"></i> <a href="https://jeditable.elabftw.net/api/#jquery-jeditable">API Documentation</a></p>
        </div>

        <h2>Core features</h2>
        <pre><code class="language-html">&lt;!-- include this in your HTML --&gt;
&lt;script src=/path/to/jquery.jeditable.min.js&gt;&lt;/script&gt;
</code></pre>
        <!-- FIRST ROW -->
        <div class='row'>

            <!-- BASIC MINIMAL EXAMPLE -->
            <div class='card col-md-12'>
                <div class='card-body'>
                    <h4 class='card-title'>Basic minimal example</h4>
                    <h6 class='card-subtitle'>The most basic example (press enter to validate). No options.</h6>
                <p class="editable-text card-text example">Click this text to edit it.</p>
                <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                <div class='source'>
                    <pre><code class="language-javascript">$(".editable-text").editable("save.php");</code></pre>
                </div>
                </div>
            </div>

            <!-- FULL EXAMPLE -->
            <div class='card col-md-12'>
                <div class='card-body'>
                    <h4 class='card-title'>Complete example</h4>
                    <h6 class='card-subtitle'>A more complete example with a bunch of options.</h6>
                <p class="editable-text-full card-text example" data-test="yep">Click this text to edit it.</p>
                <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                <div class='source'>
                <pre><code class="language-javascript">/* data that will be sent along */
var submitdata = {}
/* this will make the save.php script take a long time so you can see the spinner ;) */
submitdata['slow'] = true;
submitdata['pwet'] = 'youpla';

$(".editable-text-full").editable("save.php", {
    indicator : "&lt;img src='img/spinner.svg' /&gt;",
    type : "text",
    // only limit to three letters example
    //pattern: "[A-Za-z]{3}",
    onedit : function() { console.log('If I return false edition will be canceled'); return true;},
    before : function() { console.log('Triggered before form appears')},
    callback : function(result, settings, submitdata) {
        console.log('Triggered after submit');
        console.log('Result: ' + result);
        console.log('Settings.width: ' + settings.width);
        console.log('Submitdata: ' + submitdata.pwet);
    },
    cancel : 'Cancel',
    cssclass : 'custom-class',
    cancelcssclass : 'btn btn-danger',
    submitcssclass : 'btn btn-success',
    maxlength : 200,
    // select all text
    select : true,
    label : 'This is a label',
    onreset : function() { console.log('Triggered before reset') },
    onsubmit : function() { console.log('Triggered before submit') },
    showfn : function(elem) { elem.fadeIn('slow') },
    submit : 'Save',
    submitdata : submitdata,
    /* submitdata as a function example
    submitdata : function(revert, settings, submitdata) {
        console.log("Revert text: " + revert);
        console.log(settings);
        console.log("User submitted text: " + submitdata.value);
    },
    */
    tooltip : "Click to edit...",
    width : 160
});

/* target as a function example
$(".editable-text-full").editable(function(input, settings, elem) {
    console.log(input);
    console.log(settings);
    console.log($(elem).data('test'));
}, {});
*/
</code></pre>
                </div>
                </div>
            </div>

            <!-- NORMAL TEXTAREA -->
            <div class='card col-md-12'>
                <div class='card-body'>
                    <h4 class='card-title'>Normal textarea</h4>
                    <h6 class='card-subtitle'>Example of the 'textarea' type.</h6>
                        <p class="editable_textarea card-text example">If you click anywhere on this text, it will become a textarea that you can edit. And then you can click OK to save it.</p>
                </div>
                <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                <div class='source'>
                <pre><code class="language-javascript">$(".editable_textarea").editable("save.php", {
    type   : 'textarea',
    submit : 'OK',
    cancel : 'Nope'
});
</code></pre>
            </div>
            </div>

            <!-- SELECT -->
            <div class='card col-md-12'>
                <div class='card-body'>
                    <h4 class='card-title'>Select</h4>
                    <h6 class='card-subtitle'>Example of the 'select' type.</h6>
                    <div class='example'>
                        <p><b class="editable-select inline">THIS IS A SELECT</b>, click it to get a select menu. Options are from the "data" setting.</p>
                        <p><b class="editable-select-json inline">THIS IS A SELECT WITH JSON FEED</b>, click it to get a select menu. Options are loaded from an ajax request getting JSON.</p>
                        <p><b class="multiple-select inline">THIS IS A MULTIPLE SELECT.</b>You can select several values (try holding Shift or Ctrl).</p>
                    </div>
                </div>
                <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                <div class='source'>
                    <pre><code class="language-javascript">// inline select
$(".editable-select").editable("save.php", {
    type   : "select",
    // this data will be sorted by value
    data   : '{"Wiki":"Wiki","Banana":"Banana","Apple":"Apple", "Pear":"Pear", "selected":"Pear"}',
    submitdata : function() { return {id : 42, something: 'else'};},
    style  : "inherit",
});
// with JSON feed
$(".editable-select-json").editable("save.php", {
    type   : "select",
    loadurl : "json.php",
    submit : "OK",
    style  : "inherit"
});
// MULTIPLE SELECT
$(".multiple-select").editable("save.php", {
    type : "select",
    data   : '{"Wiki":"Wiki","Banana":"Banana","Apple":"Apple", "Pear":"Pear"}',
    submit: 'OK',
    multiple : true,
    onblur: function() { return true; },
    // use intercept to display the results as we want it
    intercept: function(result, status) {
        return "You selected: " + result + ". ";
    },
    onerror: function(settings, self, xhr) {
        console.log("Error with status code: " + xhr.status);
    },
    submitdata : function(revert, settings, result) {
        console.log("User selected values: " + result.value);
    },
});
</code></pre>
            </div>
            </div>

        </div>
        <!-- SECOND ROW -->
        <div class='row'>

            <!-- DIFFERENT EVENTS -->
            <div class='card col-md-12'>
                <div class='card-body'>
                    <h4 class='card-title'>Different events</h4>
                    <h6 class='card-subtitle'>By default a click will trigger an edit. But you can bind other events as shown below.</h6>
                    <p class='example'>
                        <b class="click" style="display: inline">Click me if you dare!</b></> or maybe you should 
                        <b class="dblclick" style="display: inline">doubleclick</b> instead? Really lazy people can just
                        <b class="mouseover" style="display: inline">mouseover me</b>...
                    </p>
                <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                <div class='source'>
                    <pre><code class="language-javascript">// click
$(".click").editable("save.php", {
    tooltip   : "Click to edit...",
    style  : "inherit"
});

// double click
$(".dblclick").editable("save.php", {
    tooltip   : "Doubleclick to edit...",
    event     : "dblclick",
    style  : "inherit"
});

// mouseover
$(".mouseover").editable("save.php", {
    tooltip   : "Move mouseover to edit...",
    event     : "mouseover",
    style  : "inherit"
});
</code></pre>
            </div>
                </div>
            </div>

            <!-- INTERCEPT -->
            <div class='card col-md-12'>
                <div class='card-body'>
                    <h4 class='card-title'>Intercepting the data sent back</h4>
                    <p class='card-text'>Useful if you want to process the returned data before it hits the page.</p>
                    <p class='intercept example'>Click here to test the intercept option.</p>
                <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                <div class='source'>
                    <pre><code class="language-javascript">$(".intercept").editable("json2.php", {
    submit : 'OK',
    intercept : function(jsondata) {
        json = JSON.parse(jsondata);
        console.log(json.status);
        console.log(json.other);
        return json.result;
    },
});
</code></pre>
            </div>
                </div>
            </div>


            <!-- EMAIL NUMBERS URL -->
            <div class='card col-md-12'>
                <div class='card-body'>
                    <h4 class='card-title'>E-mail, numbers, URL</h4>
                    <p class='card-text'>You can restrict input to emails, numbers or urls</p>
                    <p class='email example'>click@edit.me</p>
                    <p class='number example'>-2.06</p>
                    <p class='url example'>https://www.example.com</p>
                <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                <div class='source'>
                    <pre><code class="language-javascript">// EMAIL
$(".email").editable("save.php", {
    type: "email",
    tooltip: "Enter a valid email address",
    placeholder: "nico.tesla@example.com",
});
// NUMBER
$(".number").editable("save.php", {
    type: "number",
    tooltip: "Click to edit: number",
    placeholder: "0",
    min: 0,
    max: 10,
    step: 1
});
// URL
$(".url").editable("save.php", {
    type: "url",
    tooltip: "Enter a valid URL",
    placeholder: "https://www.example.com"
});
</code></pre>
            </div>
                </div>
            </div>


            <!-- CSS BUTTONS-->
            <div class='card col-md-12'>
                <div class='card-body'>
                    <h4 class='card-title'>Styling the buttons</h4>
                    <p class='card-text'>If you want to use different css class for the submit and cancel button. Also show how to add an ID to the form.</p>
                    <p class='css-buttons example'>Click here to show the buttons</p>
                <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                <div class='source'>
                    <pre><code class="language-javascript">$(".css-buttons").editable("save.php", {
    submit : 'OK',
    cancel : 'Cancel',
    cssclass : 'custom-class',
    cancelcssclass : 'btn btn-danger',
    submitcssclass : 'btn btn-success',
    formid : 'abc-123'
});
</code></pre>
            </div>
                </div>
            </div>

            <!-- CHECKBOX -->
            <div class='card col-md-12'>
                <div class='card-body'>
                    <h4 class='card-title'>Checkbox</h4>
                    <p class='checkbox example'>Click here to test checkbox input</p>
                <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                <div class='source'>
                    <pre><code class="language-javascript">$(".checkbox").editable("save.php", {
    type      : "checkbox",
    submit : 'ok'
});
</code></pre>
            </div>
                </div>
            </div>

        <h2>Features requiring plugins</h2>

            <!-- DATE PICKER -->
            <div class='card col-md-12'>
                <div class='card-body'>
                    <h4 class='card-title'>Date Picker (requires jQuery-ui datepicker)</h4>
        <pre><code class="language-html">&lt;!-- also include this in your HTML --&gt;
&lt;script src=/path/to/jquery.jeditable.datepicker.min.js&gt;&lt;/script&gt;
&lt;!-- also include jQuery-UI JS and CSS files --&gt;
</code></pre>
                  <p class="datepicker example">16-09-2018</p>
                <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                <div class='source'>
                    <pre><code class="language-javascript">$(".datepicker").editable("save.php", {
    type      : 'datepicker',
    submit : 'OK',
    datepicker : {
        format: "dd-mm-yy"
    },
    tooltip   : "Click to edit..."
});
</code></pre>
            </div>
                </div>
            </div>

            <!-- AUTOGROW -->
            <div class='card col-md-12'>
                <div class='card-body'>
                    <h4 class='card-title'>Autogrow textarea</h4>
        <pre><code class="language-html">&lt;!-- also include this in your HTML --&gt;
&lt;script src=/path/to/jquery.jeditable.autogrow.min.js&gt;&lt;/script&gt;
&lt;script src=/path/to/jquery.autogrowtextarea.js&gt;&lt;/script&gt;
</code></pre>
                    <p class="autogrow example">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    <p>Depends on <a href='https://github.com/jevin/Autogrow-Textarea'>Autogrow-Textarea</a> by Jevin O. Sewaruth.</p>
                <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                <div class='source'>
                    <pre><code class="language-javascript">$(".autogrow").editable("save.php", {
    type      : "autogrow",
    submit    : 'OK',
    cancel    : 'cancel',
    tooltip   : "Click to edit...",
    onblur    : "ignore"
});
</code></pre>
            </div>
                </div>
            </div>

        </div>
        <!-- THIRD ROW -->
        <div class='row'>

            <!-- MASKED INPUT -->
            <div class='card col-md-12'>
                <div class='card-body'>
                    <h4 class='card-title'>Masked Input</h4>
<pre><code class="language-html">&lt;!-- also include this in your HTML --&gt;
&lt;script src=/path/to/jquery.jeditable.masked.min.js&gt;&lt;/script&gt;
&lt;script src=/path/to/jquery.maskedinput.js&gt;&lt;/script&gt;
</code></pre>
                    <p class="masked example">19/12/2017</p>
                    <p>Depends on
                    <a href="https://github.com/digitalBush/jquery.maskedinput">Masked Input</a> by Josh Bush.
                    </p>
                <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                <div class='source'>
                    <pre><code class="language-javascript">$(".masked").editable("save.php", {
    type      : "masked",
    mask      : "99/99/9999",
    submit    : 'OK',
    tooltip   : "Click to edit..."
});
</code></pre>
            </div>
                </div>
            </div>


            <!-- TIME PICKER -->
            <div class='card col-md-12'>
                <div class='card-body'>
                    <h4 class='card-title'>Time Picker</h4>
        <pre><code class="language-html">&lt;!-- also include this in your HTML --&gt;
&lt;script src=/path/to/jquery.jeditable.time.min.js&gt;&lt;/script&gt;
</code></pre>
                  <p class="timepicker example">16:30</p>
                <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                <div class='source'>
                    <pre><code class="language-javascript">$(".timepicker").editable("save.php", {
    type      : 'time',
    submit    : 'OK',
    tooltip   : "Click to edit..."
});
</code></pre>
            </div>
                </div>
            </div>

            <!-- CHAR COUNTER -->
            <div class='card col-md-12'>
                <div class='card-body'>
                    <h4 class='card-title'>Character counter</h4>
        <pre><code class="language-html">&lt;!-- also include this in your HTML --&gt;
&lt;script src=/path/to/jquery.jeditable.charcounter.min.js&gt;&lt;/script&gt;
&lt;script src=/path/to/jquery.charcounter.js&gt;&lt;/script&gt;
</code></pre>
                      <p class="charcounter example">The number of characters in the textarea will be counted.</p>
                <h4 class='trigger'><i class='fas fa-eye'></i> Show source code</h4>
                <div class='source'>
                    <pre><code class="language-javascript">$(".charcounter").editable("save.php", {
    type      : "charcounter",
    submit    : 'OK',
    tooltip   : "Click to edit...",
    onblur    : "ignore",
    charcounter : {
        characters : 60
    }
});
</code></pre>
            </div>
                </div>
            </div>

        </div>
    </div>
    <script src='index.js'></script>
    </body>
</html>
